<!doctype html>
<html  lang="en" xmlns:th="http://www.thymeleaf.org">
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <title th:utext="#{login.page.title}"></title>
    <link rel="stylesheet" href="/static/lib/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/static/plugins/animate/animate.min.css">
    <link rel="stylesheet" href="/static/plugins/toast/css/jquery.toast.min.css">
    <link rel="stylesheet" href="/static/halo/halo-backend/css/style.min.css">
    <style>
        body{background-color:#f5f5f5}*{outline:0}label{color:#4b1c0f}.loginForm{max-width:380px;margin-top:10%}.loginLogo{font-size:56px;text-align:center;margin-bottom:25px;font-weight:500;color:#444;text-shadow:#b2baba .1em .1em .2em}.loginBody{padding:20px;background-color:#fff;-o-box-shadow:-4px 7px 46px 2px rgba(0,0,0,.1);box-shadow:-4px 7px 46px 2px rgba(0,0,0,.1)}.login-button{background-color:#fff;border-radius:0;border:1px solid #000;transition:all .5s ease-in-out}.login-button:hover{border:1px solid #fff;background-color:#000;color:#fff}.form-group{padding-bottom:25px}#loginName,#loginPwd{border-radius:0}.control{padding-bottom:5px}
    </style>
</head>
<body>
<div class="container loginForm">

    <div class="loginLogo animated fadeInUp">
        <p th:utext="#{home.welcome}">Welcome to our grocery store!</p>
    </div>
    <div class="loginBody animated">
        <form>

            <div class="form-group animated fadeInUp" style="animation-delay: 0.1s">
                <input type="text" class="form-control" name="loginName" id="loginName"  th:placeholder="#{login.form.loginName}" autocomplete="username">
            </div>
            <div class="form-group animated fadeInUp" style="animation-delay: 0.2s">
                <input type="password" class="form-control" name="loginPwd" id="loginPwd" th:placeholder="#{login.form.loginPwd}" autocomplete="current-password">
            </div>
            <!--<#&#45;&#45;<div class="row control animated fadeInUp" style="animation-delay: 0.3s">&ndash;&gt;-->
            <!--<#&#45;&#45;<div class="col-xs-6">&ndash;&gt;-->
                <!--<#&#45;&#45;<label for="remember"><input type="checkbox" id="remember">  <span style="color: #000;font-weight: lighter">记住我</span></label>&ndash;&gt;-->
                <!--<#&#45;&#45;</div>&ndash;&gt;-->
            <!--<#&#45;&#45;<div class="col-xs-6 pull-right text-right">&ndash;&gt;-->
                <!--<#&#45;&#45;<a href="#" style="color: #000;">忘记密码？</a>&ndash;&gt;-->
                <!--<#&#45;&#45;</div>&ndash;&gt;-->
            <!--<#&#45;&#45;</div>&ndash;&gt;-->
            <button type="button" id="btnLogin" data-loading-text="#{login.btn.logining}" class="btn btn-block login-button animated fadeInUp" onclick="doLogin()"  style="animation-delay: 0.4s;outline: none;" th:utext="#{login.btn.login}"></button>
        </form>
    </div>
</div>
</body>
<script>
    var heading = "#{common.text.tips}";
</script>
<script src="/static/halo/halo-common/jquery/jquery.min.js"></script>
<script src="/static/halo/halo-backend/plugins/bootstrap/js/bootstrap.min.js"></script>
<script src="/static/halo/halo-backend/plugins/toast/js/jquery.toast.min.js"></script>
<script src="/static/halo/halo-backend/js/halo.min.js"></script>
<script src="/static/halo/halo-backend/js/login.min.js"></script>
</html>

